<template>
    <div class="printPage">
        <!-- 退出 -->
        <img class="exitBtn" @click="clickExitBtn" src="../assets/img/exitBtn.png" alt="">
        <div class="mainBox">
            <!-- 打印及下载都操作过了 -->
            <div class="text">
                <div>请不要走开，</div>
                <div>您的照片正在打印中...</div>
            </div>
            <div class="codeBox">
                <div class="code">
                    <img src="../assets/img/printer.png" alt="">
                </div>
            </div>
            <div class="photosBtns" v-if="!isDownload">
                <div class="leftBtn bths" @click="downloadPhotos">
                    <div>下载照片</div>
                </div>
            </div>
            <div class="photosBtns" v-else>
                <div class="leftBtn bths" @click="continuePhotos">
                    <div>继续拍照</div>
                </div>
            </div>
        </div>
        <myFooter></myFooter>
        <!-- 退出确认弹框 -->
        <exitConfirmation :isShow.sync="exitShow" :text="'您正在打印照片，确定要退出吗'"></exitConfirmation>
    </div>
</template>

<script>
import myFooter from '@/components/myFooter.vue'
import exitConfirmation from '@/components/exitConfirmation.vue'
import {mapState} from 'vuex'
export default {
    components:{
        exitConfirmation,
        myFooter
    },
    computed:{
        ...mapState([
            'isDownload',
            'isPrinter',
        ])
    },
    data(){
        return {
            // 退出弹框
            exitShow:false,
        }
    },
    methods:{
        // 点击退出
        clickExitBtn(){
            this.exitShow = true;
        },
        // 点击下载照片
        downloadPhotos(){
            // 跳转下载页面
            this.$router.push('/download');
        },
        // 点击继续拍照
        continuePhotos(){
            this.$router.push('/theme');
        },
    }
}
</script>

<style lang="less" scoped>
.printPage{
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/bgImg.png');
    background-size: 100% 1920px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .exitBtn{
        width: 94px;
        height: 94px;
        position: fixed;
        left: 52px;
        top: 46px;
    }
    .mainBox{
        margin-top: 250px;
        .text{
            font-size: 48px;
            color: #FFFFFF;
            text-align: center;
        }
        .codeBox{
            width: 400px;
            height: 400px;
            background-image: url('../assets/img/Rectangle 30399.png');
            background-size: 100% 400px;
            margin: 0 auto;
            margin-top: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 69px;
            .code{
                width: 340px;
                height: 340px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .photosBtns{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 80px;
            .leftBtn{
                // background-image: url('../assets/img/buttonOne.png');
                background-size: 100% 106px;
            }
            .bths{
                width: 230px;
                height: 106px;
                font-size: 32px;
                color: #FFFFFF;
                text-align: center;
                line-height: 101px;
                display: flex;
                align-items: center;
                justify-content: center;
                .icons{
                    font-size: 40px;
                    font-weight: bold;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>